{% from "shuup/admin/macros/general.jinja" import content_block_subtitle %}

{% macro theme_card(theme_classes, current_theme, on_activate="", new_tab=False) %}
    <div class="row">
    {% for theme in theme_classes %}
        {% set active_theme = current_theme and theme.identifier == current_theme.identifier %}
            <div class="col-lg-4">
                <div class="theme-card mb-3{% if active_theme %} active-theme{% endif %}">
                    {# TODO: Get the actual theme screenshot #}
                    <img class="card-img-top" src="{{ static("shuup_admin/img/theme_placeholder.png") }}" alt="Theme screenshot">
                    <div class="theme-card-body text-center p-3">
                        <h5>{{ theme.name or theme.identifier }}</h5>
                    {% if theme.author %}
                        <p class="theme-card-text text-muted">{% trans %}Author{% endtrans %}: {{ theme.author }}</p>
                    {% endif %}
                    <a class="btn btn-sm btn-default" href="{{ url("shuup_admin:xtheme.config_detail", theme_identifier=theme.identifier) }}"><i class="fa fa-cogs"></i> {% trans %}Configure{% endtrans %}</a>
                    <button
                        name="activate"
                        value="{{ theme.identifier }}"
                        {% if on_activate != "" %} type="button" onclick="{{ on_activate }}" {% else %} type="submit" {% endif %}
                        class="btn btn-sm btn-success {% if active_theme %} hidden{% endif %}">
                        <i class="fa fa-check-circle"></i> {% trans %}Activate{% endtrans %}
                    </button>
                    </div>
                </div>
            </div>
    {% endfor %}
    </div>
    <script>
        (function() {
            window.addEventListener("load", function() {
                $(".btn-configure-theme.active").popover();
                $(".btn-configure-theme.active").popover("show");
                setTimeout(function (){
                    $(".btn-configure-theme.active").popover("hide");
                }, 3000);
            });
        })();
    </script>
{% endmacro %}

{% macro wizard_theme_table(theme_classes, current_theme, shop, on_activate="", new_tab=False) %}
    <table class="table table-striped table-bordered table-shuup theme-table">
        <thead>
            <tr>
                <th>{% trans %}Theme Name{% endtrans %}</th>
                <th>{% trans %}Actions{% endtrans %}</th>
            </tr>
        </thead>
        <tbody>
        {% for theme in theme_classes %}
            {% set active_theme = current_theme and theme.identifier == current_theme.identifier %}
            <tr {% if active_theme %} class="active-row" {% endif %} id="{{ theme.identifier }}">
                <td>
                    {% if current_theme and theme.identifier == current_theme.identifier %}
                        <strong class="title">{{ theme.name or theme.identifier }}</strong>
                    {% else %}
                        <span class="title">{{ theme.name or theme.identifier }}</span>
                    {% endif %}
                    {% if theme.author %}
                        <br><small class="text-muted">{% trans %}Author{% endtrans %}: {{ theme.author }}</small>
                    {% endif %}
                </td>
                <td>
                    <span class="active {% if not active_theme %} hidden{% endif %}"><i class="fa fa-check text-success"></i> {% trans %}Currently active{% endtrans %}</span>
                    <button
                        name="activate"
                        value="{{ theme.identifier }}"
                        id="theme-activate-{{ theme.identifier }}"
                        data-default-stylesheet="{{ theme(shop=shop).get_default_style().stylesheet }}"
                        {% if on_activate != "" %} type="button" onclick="{{ on_activate }}" {% else %} type="submit" {% endif %}
                        class="btn btn-sm btn-success {% if active_theme %} hidden {% endif %}">
                        <i class="fa fa-check-circle"></i> {% trans %}Activate{% endtrans %}
                    </button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endmacro %}
